<template>
  <div class="header">
    <!-- 左边控制窗口按钮 -->
    <div class="controlBtns" v-if="!qiankunWindow.__POWERED_BY_QIANKUN__">
      <div>
        <el-icon @click="minWindow"><Minus /></el-icon>
      </div>
      <div>
        <el-icon @click="toggleMaxWindow"><FullScreen /></el-icon>
      </div>
      <div>
        <el-icon @click="closeWindow"><Close /></el-icon>
      </div>
    </div>
    <div class="controlBtns" v-else style="font-weight: bold; color: #606266">
      资源床子应用
    </div>

    <!-- 中间logo -->
    <div v-if="loginStatus" class="logoImg">
      <div
        style="display: flex; align-items: center; margin-right: 4px"
        @click="navigateTo('/home')"
      >
        <el-icon size="20" color="#f89898"><Menu /></el-icon>
      </div>

      <el-select
        v-show="!showRecycleTitle"
        style="width: 120px"
        v-model="currentProjectId"
        placeholder="Select Project"
        @visible-change="handleVisibleChange"
        @change="handleValueChange"
      >
        <el-option
          v-for="item in projectList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>

      <div v-show="showRecycleTitle" class="recycleTitle">回收站</div>
    </div>

    <!-- 右边昵称 -->
    <div class="rightPart">
      <el-dropdown v-if="loginStatus" trigger="hover" @command="handleCommand">
        <el-icon size="20" title="项目管理"><Operation /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="home">
              <el-icon size="20" color="#f89898"><HomeFilled /></el-icon>
              <span style="margin-left: 10px">回到首页</span>
            </el-dropdown-item>
            <el-dropdown-item command="add">
              <el-icon size="20" color="#95d475"><CirclePlusFilled /></el-icon>
              <span style="margin-left: 10px">新增项目</span>
            </el-dropdown-item>
            <el-dropdown-item command="recycle">
              <el-icon size="20" color="#eebe77"><LocationFilled /></el-icon>
              <span style="margin-left: 10px">前往回收站</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!-- 右边昵称 -->
      <div class="username" @click="navigateTo('/user')">
        <el-avatar :size="26" :src="avatar" />
        &nbsp;{{ nickname }}
      </div>
    </div>
  </div>

  <!--  -->
  <!-- 新增项目对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增项目对话框"
    width="390"
    :before-close="handleDialogClose"
  >
    <div style="display: flex; align-items: center; padding-bottom: 6px">
      <div style="font-size: 16px; font-weight: bold; color: #909090">
        项目名称：
      </div>
      <el-input
        v-model="projectName"
        style="width: 260px"
        placeholder="Please input"
      />
    </div>
    <div style="display: flex; align-items: center">
      <div style="font-size: 16px; font-weight: bold; color: #909090">
        项目描述：
      </div>
      <el-input
        v-model="projectDescription"
        style="width: 260px"
        placeholder="Please input"
        :rows="3"
        type="textarea"
      />
    </div>

    <template #footer>
      <div>
        <el-button @click="handleDialogClose">Cancel</el-button>
        <el-button type="primary" @click="handleDialogConfirm">
          创建
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
import {
  Minus,
  FullScreen,
  Close,
  Operation,
  CirclePlusFilled,
  HomeFilled,
  LocationFilled,
  Menu,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { storeToRefs } from 'pinia'
import { useUserStore, useProjectStore } from '@/features/store/store'
import { controlWindow } from '@/utils/electronFunc'

// 最小化窗口
const minWindow = () => controlWindow.minWindow()
// 切换最大化窗口
const toggleMaxWindow = () => controlWindow.maxWindow()
// 关闭窗口
const closeWindow = () => controlWindow.closeWindow()

const router = useRouter()
// 路由跳转
const navigateTo = (path: string) => router.push(path)

const { nickname, avatar, loginStatus } = storeToRefs(useUserStore())
const { projectList, currentProjectId } = storeToRefs(useProjectStore())
const { setCurrentProjectId, addProject, getProjects } = useProjectStore()

const showRecycleTitle = computed(() => {
  const r = useRoute()
  if (r.path === '/recycle') return true
  else return false
})

// 下拉菜单点击回调
const handleCommand = (command: string | number) => {
  const optionFunc: { [key: string | number]: Function } = {
    home: () => navigateTo('/home'),
    add: () => (dialogVisible.value = true),
    recycle: () => navigateTo('/recycle'),
  }

  optionFunc[command]()
}

// 下拉框显示回调
const handleVisibleChange = (visible: boolean) => {
  if (visible) getProjects()
}
// 下拉框值的变化
const handleValueChange = (value: string) => {
  setCurrentProjectId(value)
  navigateTo('/home')
}

// 项目创建的一些。。。
const projectName = ref<string>('')
const projectDescription = ref<string>('')
const dialogVisible = ref<boolean>(false)

const handleDialogClose = () => {
  dialogVisible.value = false
  projectName.value = ''
  projectDescription.value = ''
}
const handleDialogConfirm = () => {
  if (projectName.value.trim().length === 0)
    return ElMessage.error('项目名称不能为空')
  addProject(projectName.value, projectDescription.value)
  handleDialogClose()
}
</script>

<style lang="less" scoped>
.header {
  height: 32px;
  // background-color: rgba(229, 229, 229, 0.623);
  background-color: rgba(255, 255, 255, 0.884);
  -webkit-app-region: drag;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 1px 2px 0 #d4d4d4;

  > .controlBtns,
  > .rightPart,
  > .logoImg {
    -webkit-app-region: no-drag;
    display: flex;
    align-items: center;
    margin-left: 5px;
    margin-right: 5px;
  }

  > .logoImg {
    cursor: pointer;
    user-select: none;

    > .recycleTitle {
      font-size: 16px;
      color: #f89898;
      font-weight: bold;
      letter-spacing: 2px;
      cursor: default;
      height: 100%;
      display: flex;
      align-items: center;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
        Microsoft YaHei, SimSun, sans-serif;
    }
  }

  > .rightPart {
    cursor: pointer;
    user-select: none;

    > .username {
      display: flex;
      align-items: center;
      padding-left: 5px;
    }
  }

  > .controlBtns {
    user-select: none;
    > div {
      margin-left: 3px;
      margin-right: 3px;
      padding: 5px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      > *:hover {
        font-weight: bold;
        color: white;
        scale: 1.1;
      }
    }

    > div:nth-child(1) {
      background-color: #68e380;
      color: #68e380;
      &:hover {
        background-color: #72dc87;
      }
    }
    > div:nth-child(2) {
      background-color: #fdd465;
      color: #fdd465;
      &:hover {
        background-color: #fadb84;
      }
    }
    > div:nth-child(3) {
      background-color: #fe8e84;
      color: #fe8e84;
      &:hover {
        background-color: #fa9d95;
      }
    }
  }
}
</style>
